<template>
  <div class="adminUser">
    <div class="adminMsg">
      <h2>用户管理</h2>
      <div class="title block">
        <span>用户账号列表</span>
        <span>用户身份</span>
        <span>用户信息</span>
        <span>操作</span>
      </div>
      <div v-for="item in list" :key="item.id">
        <div class="info block">
          <div class="imgTitle">
            <div class="userInfo">
              <h3>用户账号：{{ item.username }}</h3>
              <p>账号创建时间：{{ item.createTime }}</p>
            </div>
          </div>
          <div class="msg">
            <div>
              <p>{{ item.role }}</p>
            </div>
          </div>
          <div class="msg">
            <el-button type="primary" @click="info(item)">详情</el-button>
          </div>
          <div class="msg">
<!--            <el-button type="danger" v-if="item.status===1" @click="changeStatus(item.id)">禁用</el-button>
            <el-button type="success" v-else @click="changeStatus(item.id)">启用</el-button>-->
            <el-switch
                v-model="item.status"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    active-text="启用"
                    inactive-color="#ff4949"
                    inactive-text="禁用"
                    @change="changeStatus(item.id, item.status)"
                >
                </el-switch>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination :current-page.sync="currentPage"
                       :page-size="6"
                       :total="allList.length"
                       layout="prev, pager, next"
                       @current-change="handlePage">
        </el-pagination>
      </div>
      <el-dialog :before-close="close" :visible.sync="dialogForm" title="用户信息" width="40%">
        <el-form :model="form">
          <el-form-item :label-width="'80px'" label="账号">
            <el-input v-model="form.username" disabled></el-input>
          </el-form-item>
          <el-form-item :label-width="'80px'" label="手机号">
            <el-input v-model="form.phone" disabled> </el-input>
          </el-form-item>
          <el-form-item :label-width="'80px'" label="身份证号">
            <el-input v-model="form.idCard" disabled></el-input>
          </el-form-item>
          <el-form-item :label-width="'80px'" label="地址">
            <el-input v-model="form.address" disabled></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="close">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "AdminUser",
  data() {
    return {
      form:{},
      dialogForm: false,
      currentPage: 1,
      allList: [],
      list: []
    }
  },
  mounted() {
    this.handlePage(1)
    this.getUser()
  },

  methods: {
    handlePage(page) {
      const start = (page - 1) * 6;
      const end = page * 6;
      this.list = this.allList.slice(start, end);
    },
    getUser(){
     axios({
       url:"http://localhost:8090/user/list",
       methods: 'get',
     }).then(res=>{
       if (res.code === '200'){
         console.log(res.data)
         this.allList = res.data;
         this.list = this.allList.slice(0,6);
       }
     })
    },
    info(val){
      this.form = {
        username : val.username,
        phone: val.phone,
        idCard: val.idCard,
        address: val.address
      }

      this.dialogForm = true
    },
    close(){
      this.dialogForm = false
    },
    /*changeStatus(id){
          axios({
            url:"http://localhost:8090/user/changeStatus",
            method: 'put',
            data:{
              id:id
            }
          }).then(res=>{
            if (res.code === '200'){
              this.getUser()
            }
          })
    }*/
    changeStatus(id, status){
      // 先恢复开关状态（因为用户点击时已自动切换）
      const currentUser = this.allList.find(user => user.id === id)
      currentUser.status = status === 0 ? 1 : 0

      // 仅在禁用操作时弹出确认框
      if(status === 0) {
        this.$confirm('此操作将禁用该用户的账号权限，确定要禁用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            url:"http://localhost:8090/user/changeStatus",
            method: 'put',
            data:{ id }
          }).then(res => {
            if (res.code === '200') {
              currentUser.status = 0 // 确认后正式修改状态
              this.$message.success('已禁用账号')
            }
          })
        }).catch(() => {
          this.$message.info('已取消操作')
        })
      } else {
        // 启用操作直接执行
        axios({
          url:"http://localhost:8090/user/changeStatus",
          method: 'put',
          data:{ id }
        }).then(res => {
          if (res.code === '200') {
            currentUser.status = 1
            this.$message.success('已启用账号')
          }
        })
      }
    }

  },
}
</script>

<style scoped>
.adminUser {
  width: 1100px;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg {
  width: 1155px;
  min-height: 800px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.page {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.block {
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child {
  flex: 3;
}

.block> :nth-child(n+2) {
  flex: 1;
  text-align: center;
}

.title {
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}

.info {
  height: 60px;
  padding: 30px 15px;
  border-bottom: 1px solid #0b5481;
}

.info img {
  width: 200px;
  height: 150px;
}

.info .msg {
  color: #777;
  line-height: 20px;
}

.imgTitle {
  display: flex;
}

.userInfo {
  margin-left: 20px;
  line-height: 34px;
}

.userInfo h3 {
  font-size: 18px;
  font-weight: 600;
}

.userInfo p {
  font-size: 14px;
  color: #777;
}

.userInfo h4 {
  color: rgb(49, 159, 49);
}
</style>